<!-- @file 竖屏端表情选择 -->
<template>
  <div class="c-portrait-emotion-picker">
    <div
      class="c-portrait-emotion-picker__panel-wrap"
      :class="{
        'c-portrait-emotion-picker__panel-wrap--image': currentType === 'image',
      }"
    >
      <!-- face 表情 -->
      <div class="c-portrait-emotion-picker__panel">
        <mobile-emotion-face-picker @click-face="onClickFace" />
      </div>

      <!-- image 表情 -->
      <div
        v-if="imageEmotionEnabled"
        class="c-portrait-emotion-picker__panel"
      >
        <mobile-emotion-image-picker @click-image="onClickImage" />
      </div>
    </div>

    <!-- 底部 -->
    <div class="c-portrait-emotion-picker__bottom">
      <!-- Tab 切换 -->
      <div class="c-portrait-emotion-picker__tabs pws-mobile-emotion-picker-tabs">
        <div
          class="c-portrait-emotion-picker__tabs-item pws-mobile-emotion-picker-tabs-item"
          :class="{
            'is-active': currentType === 'face',
          }"
          @click="switchEmotionTab('face')"
        >
          <mobile-icon-smiling-face class="c-portrait-emotion-picker__tabs-item__icon" />
        </div>
        <div
          v-if="imageEmotionEnabled"
          class="c-portrait-emotion-picker__tabs-item pws-mobile-emotion-picker-tabs-item"
          :class="{
            'is-active': currentType === 'image',
          }"
          @click="switchEmotionTab('image')"
        >
          <mobile-icon-heart class="c-portrait-emotion-picker__tabs-item__icon" />
        </div>

        <div
          class="c-portrait-emotion-picker__tabs-active pws-mobile-emotion-picker-tabs-active"
          :class="{
            'c-portrait-emotion-picker__tabs-active--image': currentType === 'image',
          }"
        ></div>
      </div>

      <!-- 删除按钮 -->
      <div
        class="c-portrait-emotion-picker__del-btn pws-mobile-emotion-picker-del-button"
        @click="onClickDelete"
      >
        <mobile-icon-delete class="c-portrait-emotion-picker__del-btn__icon" />
      </div>

      <!-- 发送按钮 -->
      <normal-button
        class="c-portrait-emotion-picker__send-btn"
        :text="$lang('chat.send')"
        :size="ButtonSize.Small"
        :type="ButtonType.Portrait"
        @click="onClickSend"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useProps } from '@/assets/utils/vue-utils/props-utils';
import NormalButton from '@/components/common-base/normal-button/normal-button.vue';
import { ButtonSize, ButtonType } from '@/components/common-base/normal-button/types';
import {
  MobileIconDelete,
  MobileIconHeart,
  MobileIconSmilingFace,
} from '@/components/component-icons/mobile/map';
import {
  emotionPickerEmits,
  emotionPickerProps,
  useEmotionPicker,
} from '../hooks/use-emotion-picker';
import MobileEmotionFacePicker from '../mobile-emotion-picker/mobile-emotion-face-picker.vue';
import MobileEmotionImagePicker from '../mobile-emotion-picker/mobile-emotion-image-picker.vue';

const props = defineProps(emotionPickerProps());

const emit = defineEmits(emotionPickerEmits());

const { imageEmotionEnabled } = useProps(props);

const { currentType, switchEmotionTab, onClickFace, onClickImage, onClickDelete, onClickSend } =
  useEmotionPicker({
    props,
    emit,
  });
</script>

<style lang="scss">
.c-portrait-emotion-picker {
  padding: 0 0 24px;
}

.c-portrait-emotion-picker__panel-wrap {
  position: relative;
  left: 0;
  display: flex;
  width: 200%;
  transition: 0.3s;
}
.c-portrait-emotion-picker__panel-wrap--image {
  left: -100%;
}

.c-portrait-emotion-picker__panel {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 50%;
  height: 200px;
  padding: 0 16px;
  overflow-y: auto;
}

.c-portrait-emotion-picker__bottom {
  display: flex;
  align-items: center;
  padding: 0 16px;
  margin-top: 8px;
}

.c-portrait-emotion-picker__tabs {
  position: relative;
  display: flex;
  margin-right: auto;
  overflow: hidden;
  color: rgba($--color-white, 0.5);
  background-color: rgba($--color-white, 0.1);
  border-radius: 16px;
}

.c-portrait-emotion-picker__tabs-item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 32px;
  line-height: 32px;
  &.is-active {
    color: $--color-white;
  }
}
.c-portrait-emotion-picker__tabs-item__icon {
  display: flex;
  font-size: 20px !important;
}
.c-portrait-emotion-picker__tabs-active {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 32px;
  background-color: rgba($--color-white, 0.2);
  border-radius: 16px;
  transition: 0.3s;
  &.c-portrait-emotion-picker__tabs-active--image {
    left: 60px;
  }
}

.c-portrait-emotion-picker__del-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 32px;
  margin-right: 8px;
  line-height: 32px;
  color: $--color-white;
  background-color: rgba($--color-white, 0.1);
  border-radius: 16px;

  .c-portrait-emotion-picker__del-btn__icon {
    display: flex;
    font-size: 24px !important;
  }
}

.c-portrait-emotion-picker__send-btn {
  min-width: 66px;
}
</style>
